<template>
  <div>
    <canvas id="myCanvas" width="300" height="300" style="background-color: #2372ff" />
  </div>
</template>
<script>
export default {
  name: 'Canvas',
  components: {},
  data() {
    return {
    }
  },
  mounted() {
    // this.xianDuan()
    // this.sanJiaoXing()
    // this.yuan()
    // this.xiaoLian()
    // this.ziTi()
    // this.jianBian()
    this.drawProgress()
  },
  methods: {
    xianDuan() {
      var canvas = document.getElementById('myCanvas')
      var ctx = canvas.getContext('2d')
      ctx.moveTo(0, 0) // moveTo(x,y) 定义线条开始坐标
      ctx.lineTo(200, 100) // lineTo(x,y) 定义线条结束坐标
      ctx.stroke()
    },
    sanJiaoXing() {
      var canvas = document.getElementById('myCanvas')
      var ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.lineTo(100, 200)
      ctx.lineTo(400, 200)
      ctx.lineTo(0, 0)
      // ctx.stroke() // 无填充色
      ctx.fillStyle = 'red'
      ctx.fill() // 有填充色
    },
    yuan() {
      var c = document.getElementById('myCanvas')
      var ctx = c.getContext('2d')
      ctx.beginPath()
      ctx.lineWidth = 10
      ctx.arc(150, 150, 145, 0.5 * Math.PI, 1.5 * Math.PI) // x,y,r,sAngle,eAngle,counterclockwise
      ctx.stroke()
    },
    xiaoLian() {
      const canvas = document.getElementById('myCanvas')
      const ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.arc(75, 75, 50, 0, Math.PI * 2, true) // 绘制
      ctx.moveTo(110, 75)
      ctx.arc(75, 75, 35, 0, Math.PI, false) // 口(顺时针)
      ctx.moveTo(65, 65)
      ctx.arc(60, 65, 5, 0, Math.PI * 2, true) // 左眼
      ctx.moveTo(95, 65)
      ctx.arc(90, 65, 5, 0, Math.PI * 2, true) // 右眼
      ctx.stroke()
    },
    ziTi() {
      const canvas = document.getElementById('myCanvas')
      const ctx = canvas.getContext('2d')
      ctx.font = '30px Arial' // 设置字体及大小
      ctx.fillText('Hello World 泥巴巴', 10, 150) // 实心文字
      ctx.strokeText('Hello World 泥巴巴', 10, 180) // 空心文字
    },
    jianBian() {
      const canvas = document.getElementById('myCanvas')
      const ctx = canvas.getContext('2d')
      var grd = ctx.createLinearGradient(0, 0, 200, 0) // 设置渐变
      grd.addColorStop(0, 'red') // 渐变起始颜色
      grd.addColorStop(1, 'orange') // 渐变结束色
      ctx.fillStyle = grd // 填充色
      ctx.fillRect(10, 10, 200, 100) // (x,y,width,height) 矩形坐标和宽高
    },
    drawProgress() {
      var c = document.getElementById('myCanvas')
      var ctx = c.getContext('2d')
      ctx.beginPath()
      ctx.lineWidth = 10
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)' // 圆环颜色
      ctx.arc(150, 150, 145, 0 * Math.PI, 2 * Math.PI)
      ctx.stroke()
      ctx.save() // 先保存再画另一个
      ctx.beginPath()
      ctx.lineCap = 'round'
      // Math.PI圆周率π = 3.14 = 180°,-Math.PI / 2表示-90°，*2是因为2*Math.PI表示一个圆
      ctx.arc(150, 150, 145, -Math.PI / 2, -Math.PI / 2 + (0.67 * 2) * Math.PI)
      ctx.stroke()
    }
  }
}
</script>
